<template>
  <div>
    <el-row :gutter="2">
      <el-col :span="8">
        <div>
          <el-button type="text" icon="el-icon-edit" size="mini">编辑</el-button>
          <!--<el-button type="primary" icon="el-icon-share" size="mini">共享</el-button>-->
          <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
          <el-button type="text" icon="el-icon-plus" size="mini" @click="table.dialogVisible.addVisible = true">添加</el-button>
          <el-button type="text" icon="el-icon-tickets" size="mini" @click="get2()">获取</el-button>
          <!--<el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>-->
          <!--<el-button type="primary" size="mini">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
          <el-table
            :data="table.tableData"
            size="mini"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column align="center" type="selection"  width="40">
            </el-table-column>
            <el-table-column align="center" type="index"  width="50">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="日期" width="165">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="permission" label="permission" width="100">
              <template slot-scope="scope">
                {{ scope.row.permission }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="table.pagination.currentPage"
            :page-sizes.sync="table.pagination.pageSizes"
            :page-size.sync="table.pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total.sync="table.pagination.total" style="text-align: right">
          </el-pagination>
          <el-dialog title="添加" :visible.sync="table.dialogVisible.addVisible" width="40%">
            <el-form ref="add" label-width="80px" size="mini" width="70%">
              <el-form-item label="permission">
                <el-input v-model="table.addFields.permission"></el-input>
              </el-form-item>
              <el-form-item label="name">
                <el-input v-model="table.addFields.name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table.dialogVisible.addVisible = false">取 消</el-button>
              <el-button type="primary" @click="add()">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="编辑"
            :visible.sync="table.dialogVisible.editVisible"
            width="40%"
            ref="edit">
            <span>这是一段编辑信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table.dialogVisible.editVisible = false">取 消</el-button>
              <el-button type="primary" @click="table.dialogVisible.editVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-button type="text" icon="el-icon-edit" size="mini">编辑</el-button>
          <!--<el-button type="primary" icon="el-icon-share" size="mini">共享</el-button>-->
          <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
          <el-button type="text" icon="el-icon-plus" size="mini" @click="table2.dialogVisible.addVisible = true">添加</el-button>
          <el-button type="text" icon="el-icon-tickets" size="mini" @click="get3()">获取</el-button>
          <el-table :data="table2.tableData" size="mini" @selection-change="handleSelectionChange2" style="width: 100%">
            <el-table-column align="center" type="selection" width="40">
            </el-table-column>
            <el-table-column align="center" type="index" width="50">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="日期" width="165">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="permission" label="permission" width="100">
              <template slot-scope="scope">
                {{ scope.row.permission }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="table2.pagination.currentPage"
                         :page-sizes.sync="table2.pagination.pageSizes" :page-size.sync="table2.pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                         :total.sync="table2.pagination.total" style="text-align: right">
          </el-pagination>
          <el-dialog title="添加" :visible.sync="table2.dialogVisible.addVisible" width="40%" ref="add2">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table2.dialogVisible.addVisible = false">取 消</el-button>
              <el-button type="primary" @click="table2.dialogVisible.addVisible = false">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="编辑" :visible.sync="table2.dialogVisible.editVisible" width="40%" ref="edit2">
            <span>这是一段编辑信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table2.dialogVisible.editVisible = false">取 消</el-button>
              <el-button type="primary" @click="table2.dialogVisible.editVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-button type="text" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" size="mini">删除</el-button>
          <el-button type="text" icon="el-icon-plus" size="mini" @click="table3.dialogVisible.addVisible = true">添加</el-button>
          <el-button type="text" icon="el-icon-goods" size="mini" @click="false">授权</el-button>
          <el-table :data="table3.tableData" size="mini" style="width: 100%">
            <el-table-column align="center" type="selection" width="40">
            </el-table-column>
            <el-table-column align="center" :index="indexMethod3" type="index" width="50">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="日期" width="165">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="permission" label="permission" width="100">
              <template slot-scope="scope">
                {{ scope.row.permission }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3" :current-page.sync="table3.pagination.currentPage"
                         :page-sizes.sync="table3.pagination.pageSizes" :page-size.sync="table3.pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                         :total.sync="table3.pagination.total" style="text-align: right">
          </el-pagination>
          <el-dialog title="添加" :visible.sync="table3.dialogVisible.addVisible" width="40%">
            <el-form ref="add" label-width="80px" size="mini" width="70%">
              <el-form-item label="permission">
                <el-input v-model="table3.addFields.permission"></el-input>
              </el-form-item>
              <el-form-item label="name">
                <el-input v-model="table3.addFields.name"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table3.dialogVisible.addVisible = false">取 消</el-button>
              <el-button type="primary" @click="add3()">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="编辑" :visible.sync="table3.dialogVisible.editVisible" width="40%" ref="edit3">
            <span>这是一段编辑信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="table3.dialogVisible.editVisible = false">取 消</el-button>
              <el-button type="primary" @click="table3.dialogVisible.editVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {fetch, post} from '@/utils/http'
export default {
  data () {
    return {
      table: {
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSizes: [5, 10, 15],
          pageSize: 5,
          total: 20
        },
        dialogVisible: {
          addVisible: false,
          editVisible: false
        },
        addFields: {
          permission: '',
          name: ''
        },
        multipleSelection: []
      },
      table2: {
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSizes: [5, 10, 15],
          pageSize: 5,
          total: 20
        },
        shareData: {
          tableId: '',
          tableId2: ''
        },
        dialogVisible: {
          addVisible: false,
          editVisible: false
        },
        addFields: {
          permission: '',
          name: ''
        },
        multipleSelection: []
      },
      table3: {
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSizes: [5, 10, 15],
          pageSize: 5,
          total: 20
        },
        shareData: {
          tableId: '',
          tableId2: ''
        },
        dialogVisible: {
          addVisible: false,
          editVisible: false
        },
        addFields: {
          permission: '',
          name: ''
        },
        multipleSelection: []
      },
      shareData: {
        tableId: '',
        tableId2: ''
      }
    }
  },
  mounted: function () {
    this.fetch()
  },
  methods: {
    /// table
    handleSizeChange () {},
    handleCurrentChange () {},
    handleSelectionChange (val) {
      this.table.multipleSelection = val
    },
    fetch (page = {
      page: 1,
      limit: 5
    }) {
      // Object.assign(page, this.table.cacheSearchData)
      fetch('/upms/permission/page', page).then((res) => {
        if (res.status === 200) {
          this.table.tableData = res.data.rows
          this.table.pagination.total = res.data.total
          this.table.pagination.currentPage = page.page
          this.table.pagination.pageSize = page.limit
          this.$message(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    add () {
      let addData = {
        type: 1,
        level: 1
      }
      Object.assign(addData, this.table.addFields)
      /// 提交
      post('/upms/permission/add', addData).then(res => {
        if (res.status === 200) {
          this.$message(res.message)
          this.table.dialogVisible.addVisible = false
          let page = {
            limit: this.table.pagination.pageSize,
            page: this.table.pagination.currentPage
          }
          /// 将formData对象赋给page对象
          // Object.assign(page, formData)
          /// 模糊查询提交
          this.fetch(page)
        } else {
          this.$message.error(res.message)
        }
      })
      // this.$refs['add'].validate((valid) => {
      //   if (valid) {
      //   }
      // })
    },
    get2 () {
      if (this.table.multipleSelection.length === 1) {
        this.shareData.tableId = this.table.multipleSelection[0].id
        fetch('/upms/permission/getLazyPermissionById', {
          id: this.shareData.tableId,
          page: this.table3.pagination.currentPage,
          limit: this.table3.pagination.pageSize
        }).then(res => {
          if (res.status === 200) {
            this.$message(res.message)
            this.table2.tableData = res.data.rows
            this.table2.pagination.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.warning('只能选择一行!')
      }
    },
    /// table2
    handleSelectionChange2 (val) {
      this.table2.multipleSelection = val
    },
    get3 () {
      if (this.table2.multipleSelection.length === 1) {
        this.shareData.tableId2 = this.table2.multipleSelection[0].id
        fetch('/upms/permission/getLazyPermissionById', {
          id: this.shareData.tableId2,
          page: this.table3.pagination.currentPage,
          limit: this.table3.pagination.pageSize
        }).then(res => {
          if (res.status === 200) {
            this.$message(res.message)
            this.table3.tableData = res.data.rows
            this.table3.pagination.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.warning('只能选择一行!')
      }
    },
    /// table3
    indexMethod3 (index) {
      return index + 1 + (this.table3.pagination.currentPage - 1) * this.table3.pagination.pageSize
    },
    handleSizeChange3 (val) {
      this.table3.pagination.pageSize = val
      this.get3()
    },
    handleCurrentChange3 (val) {
      this.table3.pagination.currentPage = val
      this.get3()
    },
    add3 () {
      if (this.shareData.table2Id === '') {
        this.$message('请先获取要添加权限的父级!')
        return
      }
      let addData = {
        type: 2,
        pid: this.shareData.tableId2
      }
      Object.assign(addData, this.table3.addFields)
      /// 提交
      post('/upms/permission/add', addData).then(res => {
        if (res.status === 200) {
          this.$message(res.message)
          this.table3.dialogVisible.addVisible = false
          /// 将formData对象赋给page对象
          // Object.assign(page, formData)
          /// 模糊查询提交
          this.get3()
        } else {
          this.$message.error(res.message)
        }
      })
      // this.$refs['add'].validate((valid) => {
      //   if (valid) {
      //   }
      // })
    }
  }
}
</script>
